---
id: tabs
title: Tabs
description: Flexible navigation tool with various modes and features.
---

<ComponentPreview id="Tabs" />

## Anatomy

To set up the tabs correctly, you'll need to understand its anatomy and how we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.

<Anatomy id="tabs" />

## Examples

Learn how to use the `Tabs` component in your project. Let's take a look at the most basic example:

<Example id="basic" />

### Initial Tab

To set a default tab on initial render, use the `defaultValue` prop:

<Example id="initial-tab" />

### Tab Indicator

To provide a visual cue for the selected tab, use the `Tabs.Indicator` component:

<Example id="indicator" />

### Lazy Mounting

Lazy mounting is a feature that allows the content of a tab to be rendered only when the tab is first activated. This is
useful for performance optimization, especially when tab content is large or complex. To enable lazy mounting, use the
`lazyMount` prop on the `Tabs.Content` component.

In addition, the `unmountOnExit` prop can be used in conjunction with `lazyMount` to unmount the tab content when the
tab is deactivated, freeing up resources. The next time the tab is activated, its content will be re-rendered.

<Example id="lazy-mount" />

### Disabled Tab

To disable a tab, simply pass the `disabled` prop to the `Tabs.Trigger` component:

<Example id="disabled-tab" />

### Controlled Tabs

To create a controlled Tabs component, manage the current selected tab using the `value` prop and update it when the
`onValueChange` event handler is called:

<Example id="controlled" />

### Vertical Tabs

The default orientation of the tabs is `horizontal`. To change the orientation, set the `orientation` prop to
`vertical`.

<Example id="vertical" />

### Manual Activation

By default, the tab can be selected when it receives focus from either the keyboard or pointer interaction. This is
called automatic tab activation.

In contrast, manual tab activation means the tab is selected with the

<kbd>Enter</kbd> key or by clicking on the tab.

<Example id="manual" />

### Using the Root Provider

The `RootProvider` component provides a context for the tabs. It accepts the value of the `useTabs` hook. You can
leverage it to access the component state and methods from outside the tabs.

<Example id="root-provider" />

> If you're using the `RootProvider` component, you don't need to use the `Root` component.

## Guides

### Router Controlled Tabs

When using frameworks like Next.js, Remix, or React Router, controlling the active tabs based on the URL can be useful.

To achieve this, you need to do two things:

- Set the `value` prop to the current URL path.
- Listen to the `onValueChange` event and update the URL path.

Here's an example using Remix Router

```tsx
import { Tabs } from '@ark-ui/react/tabs'
import { useLocation, useNavigate, Link } from '@remix-run/react'

export default function App() {
  const { pathname } = useLocation()
  const navigate = useNavigate()
  const lastPathFragment = pathname.substring(pathname.lastIndexOf('/') + 1)
  const activeTab = lastPathFragment.length > 0 ? lastPathFragment : 'homepage'

  return (
    <Tabs.Root
      value={activeTab}
      onValueChange={({ value }) => {
        navigate(`/${value === 'home' ? '' : value}`)
      }}
    >
      <Tabs.List>
        <Tabs.Trigger asChild value="home">
          <Link to="">Home</Link>
        </Tabs.Trigger>
        <Tabs.Trigger asChild value="page-1">
          <Link to="page-1">Page 1</Link>
        </Tabs.Trigger>
        <Tabs.Trigger asChild value="page-2">
          <Link to="page-2">Page 2</Link>
        </Tabs.Trigger>
      </Tabs.List>
    </Tabs.Root>
  )
}
```

## API Reference

### Props

<ComponentTypes id="tabs" />

### Context

These are the properties available when using `Tabs.Context`, `useTabsContext` hook or `useTabs` hook.

<ContextType id="tabs" />

## Accessibility

Complies with the [Tabs WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).

### Keyboard Support

<KeyBindingsTable id="tabs" />
